<template>
  <div class="organizer-intro">
    <!-- <swiper
      class="swiper"
      :indicator-dots="indicatorDots"
      :autoplay="autoplay"
      :interval="interval"
      :duration="duration"
    >
      <div v-for="(item,index) in PartyDetail.active_party_banner_list" :key="index">
        <swiper-item>
          <img :src="item.img_url" class="banner-img"/>
        </swiper-item>
      </div>
    </swiper> -->
    <div class="organizer-logo-box">
      <div class="organizer-logo">
        <img :src="PartyDetail.logo_url" alt="">
      </div>
      <div class="organizer-name">{{PartyDetail.name}}</div>
    </div>
    <div class="organizer-site">
      <div class="organizer-site-top">
        <span class="vertical"></span>
        <h3 class="organizer-site-title">场地介绍</h3>
      </div>
      <div class="organizer-site-info">{{PartyDetail.site_present}}</div>
    </div>
    <!-- <ScrollX scrollTitle="活动分类" :scrollList="ClassifyList" :callback="selectClassify" /> -->
    <div class="all-activity">
      <div class="all-activity-top">
        <span class="vertical"></span>
        <h3 class="all-activity-title">全部活动</h3>
      </div>
      <div class="all-activity-contont">
        <div class="all-activity-list"  v-for="(item,index) in PartyActiveList" :key="index">
          <img :src="item.img_url">
          <p class="all-activity-name">{{item.name}}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ScrollX from '../../components/scrollX.vue'
import { 
  getClassify,
  getActivePartyDetail,
  getActivityList
} from '../../api/index.js'
export default {
  data () {
    return {
      indicatorDots: true,
      autoplay: true,
      indicatorFlag: true,
      interval: 5000,
      duration: 1000,
      carousel: [], //轮播图
      // ClassifyList: [], //分类列表
      PartyDetail:{}, //活动方详情
      PartyActiveList: [],
      limit: 6, //活动条数
      page: 0, //页码
      PartyId: 1,
    }
  },
  onShow(){
    // this.reqClassify();
  },
  onLoad(option){
    this.PartyId = option.id;
    this.reqActivePartyDetail(option.id);
    this.reqPartyActiveList(option.id);
  },
  //下拉刷新
  onPullDownRefresh () {
    this.page= 0;
    this.reqPartyActiveList(this.PartyId)
  },
  //上拉加载
  onReachBottom () {
    this.page++;
    this.reqPartyActiveList(this.PartyId)
  },
  components: {
    ScrollX,
  },
  methods:{
    //获得活动分类数据
    // async reqClassify(){
    //   let res = await getClassify();
    //   if(res.data.level == "success"){
    //     let date = res.data.data;
    //     this.ClassifyList = date;
    //   }else{
    //     wx.showToast({
    //       title: '获取活动分类失败',
    //       icon: 'none',
    //       duration: 1000
    //     })
    //   }
    // },
    //获取活动方全部活动数据
    async reqPartyActiveList(Id){
      let params = {
        active_party_id: Id,
        limit: this.limit, //活动条数
        page: this.page,
      }
      let res = await getActivityList(params);
      if(res.data.level == "success"){
        if(this.page == 0){
          this.PartyActiveList = res.data.activities;
        }else{
          this.PartyActiveList = this.PartyActiveList.concat(res.data.activities)
        }
      }else{
        wx.showToast({
          title: '获取活动方活动失败',
          icon: 'none',
          duration: 1000
        })
      }
    },
    //获取活动方详情数据
    async reqActivePartyDetail(Id){
      let params = {
        active_party_id: Id
      }
      let res = await getActivePartyDetail(params);
      if(res.data.level == "success"){
        this.PartyDetail = res.data.data;
      }else{
        wx.showToast({
          title: '获取活动方详情失败',
          icon: 'none',
          duration: 1000
        })
      }
    }
  }
}
</script>
<style lang='stylus' scoped>
  .organizer-intro
    width 100%
    height 100%
    .swiper
      width 100%
      height 400rpx
      .banner-img
        width 100%
        height 400rpx
    .organizer-logo-box
      width 100%
      padding 20rpx
      background-color #fff
      .organizer-logo
        width 200rpx
        height 200rpx
        margin 0 auto
        img
          width 200rpx
          height 200rpx
      .organizer-name
        margin 0 auto
        width 200rpx
        font-size 14px
        color #888
        text-align center
        margin-top 10rpx
    .organizer-site
      margin 10rpx 0
      padding 20rpx
      background-color #fff
      .organizer-site-top
        display flex
        .vertical
          width 6rpx
          height 28rpx
          background-color black
        .organizer-site-title
          font-size 30rpx
          margin-left 10rpx
          font-weight 300
      .organizer-site-info
        margin 20rpx 0
        font-size 14px
        line-height 34rpx
        overflow hidden
        color #888
    .all-activity
      width 100%
      .all-activity-top
        display flex
        background-color #fff
        padding 20rpx
        .vertical
          width 6rpx
          height 28rpx
          background-color black
        .all-activity-title
          font-size 29rpx
          margin-left 10rpx
          font-weight 300
      .all-activity-contont
        padding 20rpx
        padding-top 6rpx
        display flex
        justify-content space-between
        align-items center
        flex-wrap wrap
        .all-activity-list
          width 345rpx
          margin-top 14rpx
          img
            width 100%
            height 180rpx
          .all-activity-name
            font-size 14px
            line-height 16px
            margin-top 10rpx
            text-align center
            color #333
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
</style>